<template>
  <div class="app-container">
    <iframe
      id="iframe"
      width="100%"
      style="min-height: 800px"
      height="100%"

      frameborder="0"
      align="center"
      allowfullscreen="true"
      allow="autoplay"
      :src="src"
    />
  </div>

</template>

<script>
import busObj from '@/views/common/busObj'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import {
  getTypesByKey,
  designSave,
  getBusinessTableListJson,
  businessTableSave,
  businessTableGet,
  businessTableCreate,
  businessTableColumnDelete,
  businessObjectGet,
  businessObjectSave
} from '@/api/form'
import { Login, userInfo, GET_RESOURCE3, SERVICE_ADMIN, SERVICE_FORM } from '@/api/api'

export default {
  name: 'FormDesign',
  components: {
    busObj,
    Treeselect
  },

  data() {
    return {
      src: null,
      categoryData: [],
      modelerSrc: '',
      busShow: false,
      baseURL: process.env.VUE_APP_BASE_BPM_API
    }
  },
  mount() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
  },
  created() {
    //
    var query = this.$route.query
    var id = query.id
    if (id) {
      this.src = this.baseURL + '/form/index.html#/?id=' + id + '&t=' + new Date().getTime()
    }
  },
  methods: {
    // 后台返回的数据如果和VueTreeselect要求的数据结构不同，需要进行转换
    normalizer(node) {
      // 去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.title,
        label: node.title,
        children: node.children
      }
    },
    selectTree: function(node, instanceId) {
      this.formInline.groupId = node.id
      this.formInline.groupName = node.title
    },

    clearOnSelect: function(node, instanceId) {
      if (!node) {
        this.formInline.groupId = ''
        this.formInline.groupName = null
      }
    },
    confirmDialogSingleEvent: function(data) {
      if (data) {
        this.mainTable = data
        this.formInline.mainTable = data.tableName
        this.formInline.formBusinessId = data.id
      }
    },
    addBus: function() {
      this.busShow = true
    },
    add: function() {
      this.$refs['formInline'].validate((valid) => {
        if (valid) {
          designSave(this.formInline).then((response) => {
            var code = response.code
            if (code == 0) {

            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    queryFormCreateTime: function(e) {
      this.queryForm.createTime = e
    },
    refreshTask: function(data) {
      if (data[0].parentId == '-1') {
        this.queryForm.groupId = ''
      } else {
        this.queryForm.groupId = data[0].id
      }
      this.getData()
    },
    queryMethod: function() {
      var name = this.queryForm.name
      var whereSql = ''
      var createTime = this.queryForm.createTime
      if (createTime) {
        if (createTime[0]) {
          whereSql = "  CREATE_TIME_  between '" + createTime[0] + "' and " + "'" + createTime[1] + "'"
        }
      }
      this.queryForm.whereSql = whereSql
      getTaskData(this.queryForm).then((response) => {
        this.tableData = response.data
        if (response.count.length > 0) {
          this.total = parseInt(response.count)
        } else {
          this.total = 0
        }
      })
    },
    getTypesByKeyAction: function() {
      getTypesByKey().then((response) => {
        this.categoryData = response.data
      })
    },
    initData: function() {
      this.getTypesByKeyAction()
      this.getData()
    },
    getData: function() {
      getTypesByKey().then((response) => {
        this.categoryData = response.data
      })
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getData()
    },
    handleClick(data) {
      this.$router.push({ name: 'businessTableInnerAdd', query: { t: new Date().getTime(), 'id': data.id, 'operate': data.type, 'edit': true }})
    },
    handleDelClick(data) {
      businessTableDel(data.id).then((response) => {
        if (response.code == 0) {
          this.$message({ 'duration': 800, message: '操作成功', type: 'warning', customClass: 'zZindex' })

          this.getData()
        } else {
          this.$message({ 'duration': 800, message: response.msg, type: 'warning', customClass: 'zZindex' })
        }
      })
    },
    search() {
      this.queryForm.page = 0
      this.queryMethod()
    },
    reset() {
      this.queryForm.name = ''
      this.queryForm.createTime = ''
      this.queryForm.whereSql = ''
      this.queryDate = []
      this.getData()
    }

  }

}

</script>
<style lang="scss">
  .task-card{
    margin-top: 10px;
  }

</style>
